@extends('layouts/app')

@section('content')
{{-- roortable添加房桌--}}
<div class="weui-pay ">

    <div class="site weui-cells_checkbox">
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label for="name">名称:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="name" placeholder="唐朝">
            </div>
        </div>
    </div>

    <div class="site weui-cells_checkbox">
        <div class="weui-cell ">
            <div class="weui-cell__hd room">
                <label for="name">类型:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="selectType" name="" type="text" placeholder="包房">
                <input class="weui-input" id="type" name="type" type="hidden" >
            </div>
            <div class="weui-cell__dd">
                <svg class="icon f40" aria-hidden="true">
                    <use xlink:href="#icon--34"></use>
                </svg>
            </div>
        </div>
    </div>

    <div class="site weui-cells_checkbox">
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label for="name">人数:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="hold" placeholder="10">
            </div>
            <div class="weui-cell__dd">
                <label for="name">人</label>
            </div>
        </div>
    </div>
    <div class="site weui-cells_checkbox">
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label for="name">最低消费:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="min_consumption" placeholder="">
            </div>
            <div class="weui-cell__dd">
                <label for="name">元</label>
            </div>
        </div>
    </div>
    <div class=" weui-cells weui-cells_checkbox">
        <div class="facility">
            <label class="weui-cell" for="s11">
                <div class="weui-cell">
                    <p>是否开启二维码</p>
                </div>
                <div class="weui-cell__hd ">
                    <p>是</p>
                </div>
                <div class="weui-cell__hd">
                    <input type="radio" class="weui-check" value="1" name="lock_qrcode" id="s11" checked="checked">
                    <i class="weui-icon-checked"></i>
                </div>
            </label>

            <label class="weui-cell" for="s12">
                <div class="weui-cell__hd">
                    <p>否</p>
                </div>
                <div class="weui-cell__hd">
                    <input type="radio" name="lock_qrcode" value="0" class="weui-check" id="s12">
                    <i class="weui-icon-checked"></i>
                </div>
            </label>
        </div>
    </div>


    <div class="site weui-cells_checkbox">
        <div class="weui-cells_checkbox ">
            <div class="weui-grids  picture-video">
                <div class="video weui-flex__item" id="add">
                    <label class="face-img" for="uploaderInput">
                    <img src="/img/erha1.png" alt="">
                    </label>
                </div>
                <div class="weui-uploader__input-box pull-right" style="display: none;">
                    <form action="" id="img-form">
                        @csrf
                        <input id="uploaderInput" name="thumb" class="weui-uploader__input" type="file" accept="image/*" multiple="" onchange="saveImg('/uploadImg', '#img-form', showHead)">
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="demos-content-padded">
        <a href="javascript:;" class="weui-btn weui-btn_blue open-popup">确认</a>
    </div>
</div>
<script>
    //创建房桌
    var id = getRequest().id;
    $(".open-popup").click(function(){
        //对应参数
        var data ={};
        data['shop_id'] =id;
        data['name'] =$("input[name='name']").val();
        data['type'] =$("input[name='type']").val();
        data['hold'] =$("input[name='hold']").val();
        data['thumb'] =$("input[name='thumb']").val();
        data['lock_qrcode'] = $("input[name='lock_qrcode']:checked").val();
        data['min_consumption'] =$("input[name='min_consumption']").val();
        data['thumb'] = "";
        var len = $(".picture-video .myimg").length;

        $(".picture-video .myimg").each(function (index, value) {
            console.log("index", index);
             var url = $(this).attr("src");
            if (index < len -1) {
                data['thumb'] += url + ';';
            } else {
                data['thumb'] += url;
            }
        });
        //创建请求接口方法
        $.post("/api/shop/createRoomTable",data,function(res){
            console.log("res",res);
            //字符串转换对象
            if(typeof res === 'string'){
                res =JSON.parse(res);
            }
            $.alert (res.info, function () {
                if(res.code == 200){
                    history.go(-1);
                }
            });

        })
    });


    var _token = $("input[name='_token']").val();

    // 选择房间
    $("#selectType").select({
        title: "选择房间",
        items: [{title: '包房', value: 1}, {title: '大厅', value: 0}],
        onChange: function(res) {
            console.log("res", res);

        },
        onClose: function(res) {
            console.log("close", res);
            $("#type").val(res.data.values);

        },
        onOpen: function() {
            console.log("open");
        }
    });

    function showHead(img) {
//              console.log("img", img);
        if(img.code==200){
            var htmlText = [];
            htmlText.push('<div class="video js_grid ">');
            htmlText.push('<label class="face-img" for="uploaderInput">');
            htmlText.push('<img src='+ img.data +  ' class="myimg"/>');
            htmlText.push('</label>');
            htmlText.push('</div>');
            console.log("htmlText", htmlText.join(''));
            $("#add").before(htmlText.join(''));
        }else{
            $.toast(img.info, 'text');
        }



    }
</script>
@endsection
@extends('layouts/footer')
